<template>
  <view class="charging-pile-list" id="list">
    <view class="pile-item" v-for="(pile, index) in pileList" :key="index" @click="toDetail(pile)">
      <view class="pile-status">
        <view :class="['status-circle', pile.status]">
          <view class="status-text">{{ pile.statusText }}</view>
        </view>
      </view>
      <view class="pile-info">
        <view class="pile-header">
          <view style="display: flex;align-items: center">
            <text class="pile-name">{{ pile.name || '' }}</text>
            <text class="pile-code">（{{ pile.code || '' }}）</text>
          </view>
          <view :class="['pile-type', pile.type == '1' ? 'fast' : 'slow']">{{pile.type == '1' ? '快' : '慢' }}</view>
        </view>
        <view class="pile-detail">
<!--          <text>车位号无</text>-->
          <text>{{ pile.power || '' }}kW | {{ pile.voltage || '-' }} V</text>
          <text>{{ pile.current || '' }} | {{ pile.standard || '-' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'charging-pile-list',
  props: {
    pileList: {
      type: Array,
      default: () => [
      ]
    },
    stationId: {
      type: String,
      default: ''
    }
  },
  methods: {
    toDetail(item) {
      if (item.status === 'free') {
        // 去充电桩详情页stationId
        uni.navigateTo({
          url: `/pages/charging/index?portId=${item.portId}&stationId=${this.stationId}`
        })
      } else {
        uni.showToast({
          icon: 'none',
          title: '充电桩' + item.statusText
        })
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.charging-pile-list {
  margin-top: 24rpx;
  background: #FFFFFF;
  padding: 24rpx;
  border-radius: 24rpx;

  .pile-item {
    display: flex;
    padding: 24rpx 0;
    border-bottom: 2rpx solid #F5F5F5;

    &:last-child {
      border-bottom: none;
    }

    .pile-status {
      margin-right: 24rpx;

      .status-circle {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 50%;
          border: 8rpx solid;
          opacity: 0.2;
        }

        &::after {
          content: '';
          position: absolute;
          top: 8rpx;
          left: 8rpx;
          right: 8rpx;
          bottom: 8rpx;
          border-radius: 50%;
          border: 4rpx solid;
        }

        .status-text {
          font-size: 32rpx;
          font-weight: 500;
          position: relative;
          z-index: 1;
          text-align: center;
          line-height: 1.2;
        }

        &.free {
          background: rgba(4, 200, 174, 0.05);
          &::before, &::after {
            border-color: #04C8AE;
          }
          .status-text {
            color: #04C8AE;
          }
        }

        &.offline {
          background: rgba(153, 153, 153, 0.05);
          &::before, &::after {
            border-color: #999999;
          }
          .status-text {
            color: #999999;
          }
        }

        &.charging {
          background: rgba(84, 148, 254, 0.05);
          &::before, &::after {
            border-color: #5494FE;
          }
          .status-text {
            color: #5494FE;
          }
        }
        &.fault {
          // 红色
          background: rgba(255, 75, 51, 0.05);
          &::before, &::after {
            border-color: #FF4B33;
          }
          .status-text {
            color: #FF4B33;
          }
        }
      }
    }

    .pile-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .pile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16rpx;
        flex-wrap: wrap;

        .pile-name {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }

        .pile-code {
          font-size: 28rpx;
          color: #333;
          margin-right: 12rpx;
        }

        .pile-type {
          padding: 4rpx 12rpx;
          border-radius: 4rpx;
          font-size: 24rpx;
          color: #FFFFFF;
          min-width: 40rpx;
          text-align: center;

          &.fast {
            background: #FF4B33;
          }

          &.slow {
            background: #04C8AE;
          }
        }
      }

      .pile-detail {
        display: flex;
        flex-direction: column;
        gap: 8rpx;

        text {
          font-size: 24rpx;
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }
}
</style>
